<script setup>
    import { getTreeMemberListCount, getMemberList, getSexList, getNationList } from '@/api/party'

    let filterParams = $ref({
        pageNo: 1,
        pageSize: 20
    })

    let totalCount = $ref(0)

    let resData = $ref([])

    // 村列表
    let treeData = $ref([])
    let copyData = []
    let current = $ref(null)
    let treeLoading = $ref(false)
    const getTreeList = () => {
        treeLoading = true
        getTreeMemberListCount().then(res => {
            treeLoading = false
            copyData = res.result
            treeData = res.result
        })
    }

    // 搜索村
    let keyword = $ref('')
    const treeSearch = () => {
        let data = JSON.parse(JSON.stringify(copyData))
        if(keyword){
            data = copyData.filter((item) => {
                return item.name.indexOf(keyword) > -1
            })
        }

        treeData = data
    }


    // 性别列表
    let sexList = $ref([])

    // 民族列表
    let nationList = $ref([])

    const getFilterItemData = () => {
        getSexList().then(res => {
            sexList = res.result
        })

        getNationList().then(res => {
            nationList = res.result
        })
    }

    // 党员列表
    let dataLoading = $ref(false)
    const getList = () => {
        dataLoading = true
        getMemberList(filterParams).then(res => {
            dataLoading = false
            let { records, total } = res.result
            resData = records
            totalCount = total
        })
    }

    const handleClick = (index, id) => {
        current = index
        filterParams.pageNo = 1
        filterParams.partyBranchId = id
        getList()
    }


    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getList()
    }

    const handleSizeChange = (size) => {
        filterParams.pageSize = size
        getList()
    }

    // 查询
    const handleClickSearch = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 重置
    const handleClickReset = () => {
        filterParams = {
            partyBranchId: filterParams.partyBranchId,
            pageNo: 1,
            pageSize: 20
        }
    }

    

    const showOpenList = () => {
        getTreeList()
        getList()
        getFilterItemData()
    }

    showOpenList()

    const emit = defineEmits(['hideMemberList'])

    // 关闭
    const handleClickClose = () => {
        emit('hideMemberList')
    }

</script>

<template>
    <div class="open-list-box flex" v-if="showOpenList">
        <div class="left-list">
            <div class="title">徐庄镇区域列表</div>
            <div class="search flex-between">
                <input v-model="keyword" />
                <img src="../../../assets/images/search-black.png" alt="" @click="treeSearch">
            </div>

            <el-scrollbar class="list" v-loading="treeLoading">
                <div class="item" 
                    v-for="(item, index) in treeData"
                    :key="index"
                    :class="{ active: index==current }"
                    @click="handleClick(index, item.id)"
                >
                    {{ item.name }}({{ item.partyCount }})
                </div>
            </el-scrollbar>
        </div>

        <div class="right-content-wrap">
            <div class="top-operation flex-between">
                <div class="top-l flex-center">
                    <div class="back" @click="handleClickClose">
                        <img src="../../../assets/images/back.png" alt="">
                        党员列表
                    </div>
                    <div class="search-item flex-center">
                        <el-select 
                            class="open-type" 
                            clearable 
                            v-model="filterParams.sex"
                            placeholder="请选择性别"
                        >
                            <el-option 
                                v-for="(item, index) in sexList" 
                                :key="index"
                                :label="item.itemText"
                                :value="item.itemValue"
                            >{{item.itemText}}</el-option>
                        </el-select>
                        <el-select 
                            class="open-type" 
                            clearable 
                            v-model="filterParams.nation"
                            placeholder="请选择民族"
                        >
                            <el-option 
                                v-for="(item, index) in nationList" 
                                :key="index"
                                :label="item.itemText"
                                :value="item.itemValue"
                            >{{item.itemText}}</el-option>
                        </el-select>
                        <el-input class="keyword-input" clearable v-model="filterParams.name" placeholder="请输入姓名"></el-input>
                        <el-input class="keyword-input" clearable v-model="filterParams.phone" placeholder="请输入手机号"></el-input>
                        <div class="search-btn reset" @click="handleClickReset">重置</div>
                        <div class="search-btn ml10" @click="handleClickSearch">查询</div>
                    </div>
                </div>
                <div class="close" @click="handleClickClose"><img src="../../../assets/images/close.png" alt=""></div>
            </div>

            <div class="open-info-table" v-loading="dataLoading">
                <el-table 
                    :data="resData" 
                    style="width: 100%"
                    height="650"
                    size="large"
                    class="table"
                    ref="multipleTable"
                >
                    <el-table-column type="index" label="序号" width="80" align="center" />
                    <el-table-column prop="name" label="姓名" min-width="80" />
                    <el-table-column prop="sex_dictText" label="性别" min-width="80" align="center" />
                    <el-table-column prop="nation_dictText" label="民族" min-width="80"  align="center" />
                    <el-table-column prop="phone" label="手机号" min-width="120" align="center" />
                    <el-table-column prop="idCard" label="身份证" min-width="150" align="center" />
                    <el-table-column prop="birth" label="生日" min-width="100" align="center" />
                    <el-table-column prop="partyBranchId_dictText" label="党支部" min-width="130" show-overflow-tooltip />
                    <el-table-column prop="partyAge" label="党龄" min-width="80" align="center" />
                    <el-table-column prop="joinPartyDate" label="入党时间" min-width="120" align="center" />
                </el-table>

                <el-pagination 
                    class="mt20" 
                    background 
                    layout="total, sizes, prev, pager, next" 
                    :total="totalCount" 
                    :page-size="filterParams.pageSize"
                    :current-page="filterParams.pageNo"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                />
            </div>

        </div>
    </div>
</template>

<style lang="less">
    .open-list-box{
        position: fixed;
        top: 124px;
        left: 40px;
        bottom: 124px;
        right: 40px;
        z-index: 999999;
        // margin: 124px 40px;

        .left-list{
            height: 100%;
            width: 276px;
            background: #2E62C5 url('../../../assets/images/villageList.png') center no-repeat;
            padding: 40px 25px;

            .title{
                text-align: center;
                font-size: 22px;
                color: #333333;
                padding-bottom: 15px;
            }

            .search{
                width: 100%;
                height: 40px;
                border-radius: 4px;
                border: 1px solid #333;
                padding: 0 15px;

                input{
                    width: 160px;
                    height: 38px;
                    border: none;
                    margin-right: 15px;
                }

                img{
                    width: 22px;
                    height: 22px;
                    cursor: pointer;
                }
            }

            .list{
                height: 680px;
                padding: 14px 20px;
                overflow: hidden;

                .item{
                    font-size: 18px;
                    padding: 10px 0;
                    color: #333;
                    cursor: pointer;

                    &:hover, &.active{
                        color: #0E6DE9;
                    }
                }
            }
        }

        .right-content-wrap{
            flex: 1;
            margin-left: 18px;
            background: rgba(255,255,255,0.95);
            padding: 22px 20px;
            color: #333;

            .top-operation {
                .back{
                    padding: 0 45px 0 22px;
                    font-size: 22px;
                    cursor: pointer;

                    img{
                        width: 23px;
                        height: 21px;
                        margin-right: 7px;
                    }
                }

                .search-item{
                    .open-type{
                        width: 125px;
                        margin-right: 10px;
                    }

                    .el-input .el-input__wrapper{
                        color: #333;
                    }

                    .el-input__inner{
                        color: #333 !important;
                    }

                    .keyword-input{
                        width: 215px;
                        margin-right: 10px;
                    }

                    .search-btn{
                        width: 55px;
                        height: 32px;
                        line-height: 30px;
                        text-align: center;
                        background: #0E6DE9;
                        border: 1px solid #0E6DE9;
                        border-radius: 4px;
                        color: #fff;
                        font-size: 16px;
                        cursor: pointer;

                        &.reset{
                            color: #0E6DE9;
                            background: #fff;
                        }
                    }
                }

                .close{
                    cursor: pointer;
                }
            }

            .open-info-table{
                margin-top: 40px;

                .details-text{
                    color: #333;

                    &:hover{
                        color: #0E6DE9;
                    }
                }
                .table thead{
                    background: transparent;
                    color: #666666;
                    font-size: 18px;
                }

                .table.el-table, .table.el-table tr, .table.el-table th, .table.el-table td{
                    background: transparent;
                    border: none;
                    color: #333333;
                    font-size: 16px;
                }
                
                .table.el-table--enable-row-hover .el-table__body tr:hover{
                    background: rgba(14,109,233,0.1);
                    border: 1px solid #0E6DE9;
                    box-shadow: inset 0px 0px 1px 1px #0E6DE9;

                    &>td.el-table__cell{
                        background: transparent
                    }

                    .details-text{
                        color: #0E6DE9;
                    }
                }

                .table.el-table td.el-table__cell, .table.el-table th.el-table__cell.is-leaf{
                    border: none;
                    background: transparent;
                }

                .table .el-table__inner-wrapper::before{
                    height: 0;
                }

                .table.el-table--large .cell{
                    padding: 0 5px;
                    cursor: pointer;
                }

                .el-pagination {
                    display: flex;
                    justify-content: center;

                    .el-input__inner{
                        color: #333 !important;
                    }
                }

                .el-pagination__total{
                    color: #333 !important;
                }
            }

            .details-wrap{
                color: #333;
                height: 740px;
                overflow: hidden;
                padding: 0 30px;
                
                .title{
                    font-size: 26px;
                    font-weight: bold;
                    padding: 25px 0;
                    text-align: center;
                }

                .desc{
                    text-align: right;

                    span{
                        margin-left: 10px;
                        font-size: 14px;
                        color: #999
                    }
                }

                .content{
                    padding-top: 30px;
                    font-size: 16px;
                    line-height: 22px;
                }
            }

        }
    }
</style>